<template>
    <div class="shop-map-container">
        <div id="map_search_result" class="left amap-pl-pc" style="display:none;"></div>
        <el-amap ref="map" style="width:100%;height:100%;"
                 :center="center"
                 :events="events"
                 :plugin="plugin"
                 :zoom="14">
        </el-amap>
    </div>
</template>
<style type="text/css">
    .search-box {
        position: absolute;
        top: 25px;
        left: 20px;
    }
    .amap-page-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    import { AMapManager } from 'vue-amap';
    export default {
        name: 'map-marker',
        props: {
            keyword: {
                type: String
            },
            mapCenter: {
                type: String
            },
            mapCity: {
                type: String
            }
        },
        watch: {
            keyword: {
                immediate: true,
                handler (val) {
                    if(val != "") {
                        let placeSearch;
                        const instance = this;
                        // console.log(this.mapCity)
                        AMap.service(["AMap.PlaceSearch"], function() {
                            placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                                pageSize: 15,
                                pageIndex: 1,
                                panel: "map_search_result",
                                city: instance.mapCity || "南京"
                            });
                        });
                        placeSearch.search(val, (status, result)=>{
                            if (status === 'complete' && result.info === 'OK') {
                                var count = result.poiList.count;
                                if(count > 0) {
                                    this.searchPlace = result.poiList.pois;
                                    setTimeout(()=>{
                                        var i = $("#map_search_result").find("li.poibox");

                                        i.each(function(t) {
                                            // console.log("aaa")
                                            $(this).on("click", function() {
                                                // console.log("click")
                                                var e = instance.searchPlace[t];
                                                console.log(e,'#######')
                                                instance.address = e
                                                if(instance.g_last_marker) {
                                                    instance.map_set_point(e.location, e.adcode);
                                                    instance.map.setCenter(e.location);
                                                }

                                            });
                                        })
                                    }, 300)

                                    
                                } else {
                                    $("#map_search_result").html('<p class="amap_lib_placeSearch">抱歉，未搜索到有效的结果。</p>');
                                }
                                $("#map_search_result").show();
                            }
                        })
                    }
                }
            },
            mapCenter: {
                immediate: true,
                handler(val) {
                    if(val && this.map) {
                        let a = val.split(",");
                        if(a.length === 2) {
                            let position = new AMap.LngLat(a[1], a[0])
                            if(this.g_last_marker) {
                                this.map_set_point(position);
                                this.map.setCenter(position);
                            }
                        }
                    }
                }
            },
            mapCity: {
                immediate: true,
                handler(val) {
                    if(val) {
                    }
                }
            }
        },
        components: {
        },
        data() {
            return {
                address:"",
                mapReady: false,
                map: undefined,
                location: '',
                results: undefined,
                plugin: [],
                searchOption: {
                    citylimit: false
                },
                resultShow: false,
                events: {
                    init: (map)=>{
                        this.map = map
                        this.bmap_add_marker(map)
                    },
                    // click: (e)=>{
                    //     console.log(e)
                    //     let position = e.lnglat;
                    //     if(this.g_last_marker) {
                    //         this.map_set_point(position);
                    //     }
                    // }
                },
                g_last_marker: undefined,
                searchPlace: [],
                center: [118.796623, 32.059352]
            }
        },
        created() {

        },
        methods: {
            bmap_add_marker(map, MarkerOptions) {
                var options =
                    {
                        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                        draggable: false
                    }, options = $.extend(options, MarkerOptions);
                let marker = new AMap.Marker(options);
                marker.setMap(map);
                this.g_last_marker = marker;
            },
            map_set_point(position, adCode) {
                this.g_last_marker.setPosition(position);
                this.$emit('getPoi', {
                    position: position,
                    adCode: adCode,
                    address: this.address
                })
            }
        }
    }
</script>